Chapter 6 Pagination in Livewire

First we need to set our main livewire component, this component will works as a little layout inside of our main blade or another livewire component

class Feed extends Component {
	// The number of elements showed per pagination
	public $paginated = 10;
	
	// Here we set how the information will be paginated
	// the number inside of 'paginate' is the number of elements which will be showed in each pagination
	public function render() {
		return view('component', [
			"elements" => User::all()->paginate($this->paginated);
			// or User::latest()->paginate(10);
			// to get the lastest publications
		]);
	}
	
	// This function will be adding more elements each time this function is activated
	public function loadMore() {
		$this->paginated += 10;
	}
}

In the component .blade:

{{-- We will set lazy in child livewire component to set lazy loading --}}
@foreach($elements as $element)
	<livewire:component :name=>$element->name lazy>
@endforeach

{{-- Each time that this element enters in the view, will charge 'loadMore' function to load more elements, using lazy loading. As a lazy loading, here you can set a loading component, or put something like "loading more components" or whatever you want --}}
<div class="my-3" x-intersect="$wire.loadMore()">
	loading ...
</div>